<template>
    <div class="app-container">
        <el-tabs type="border-card">
            <el-tab-pane label="满意度指标">

                <el-card shadow="always">
                    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                        <el-form-item label="期数">
                            <el-select v-model="queryForm.time" placeholder="请选择期数" value-key="id" style="width: 340px">
                                <el-option v-for="item in batchOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="loadTableData">查询</el-button>
                            <el-button @click="unsetQueryForm"><el-icon>
                                    <RefreshRight />
                                </el-icon>重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-card shadow="always" style="width:100%;margin-top: 10px;" header="区县满意度表现值对比">
                            <div id='countyPerformBar' style="width: 100%;height:400px"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="always" style="width:100%;margin-top: 10px;" header="区县满意度领先度对比">
                            <div id='countyLeadBar' style="width: 100%;height:400px"></div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-card shadow="always" style="width:100%;margin-top: 10px;" header="地市满意度表现值对比">
                            <div id='cityPerformBar' style="width: 100%;height:400px"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="always" style="width:100%;margin-top: 10px;" header="地市满意度领先度对比">
                            <div id='cityLeadBar' style="width: 100%;height:400px"></div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="always" style="margin-top: 10px;" header="区县满意度指标">
                    <el-table :data="countyTableData" style="width: 100%">
                        <el-table-column type="index" width="50" />
                        <el-table-column prop="date" label="期数" width="250">{{ currentDateString }}</el-table-column>
                        <el-table-column prop="name" label="区县" width="100" />
                        <el-table-column label="表现值" align="center">
                            <el-table-column prop="overallSatisfaction" label="综合满意度" sortable width="120" />
                            <el-table-column prop="overallSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="bizSatisfaction" label="移动业务满意度" sortable width="150" />
                            <el-table-column prop="bizSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="networkSatisfaction" label="网络质量" sortable width="120" />
                            <el-table-column prop="networkSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="voiceSatisfaction" label="语音质量" sortable width="120" />
                            <el-table-column prop="voiceSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="flowSatisfaction" label="上网质量" sortable width="120" />
                            <el-table-column prop="flowSatisfactionIndex" label="排名" width="60" />
                        </el-table-column>
                        <el-table-column label="领先度" align="center">
                            <el-table-column prop="overallSatisfactionLead" label="综合满意度" sortable width="120" />
                            <el-table-column prop="overallSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="bizSatisfactionLead" label="移动业务满意度" sortable width="150" />
                            <el-table-column prop="bizSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="networkSatisfactionLead" label="网络质量" sortable width="120" />
                            <el-table-column prop="networkSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="voiceSatisfactionLead" label="语音质量" sortable width="120" />
                            <el-table-column prop="voiceSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="flowSatisfactionLead" label="上网质量" sortable width="120" />
                            <el-table-column prop="flowSatisfactionLeadIndex" label="排名" width="60" />
                        </el-table-column>
                        <el-table-column prop="base" label="Base" />
                    </el-table>
                </el-card>
                <el-card shadow="always" style="margin-top: 10px;" header="地市满意度指标">
                    <el-table :data="cityTableData" style="width: 100%">
                        <el-table-column type="index" width="50" />
                        <el-table-column prop="date" label="期数" width="250">{{ currentDateString }}</el-table-column>
                        <el-table-column prop="name" label="地市" width="100" />
                        <el-table-column label="表现值" align="center">
                            <el-table-column prop="overallSatisfaction" label="综合满意度" sortable width="150" />
                            <el-table-column prop="overallSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="bizSatisfaction" label="移动业务满意度" sortable width="150" />
                            <el-table-column prop="bizSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="networkSatisfaction" label="网络质量" sortable width="150" />
                            <el-table-column prop="networkSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="voiceSatisfaction" label="语音质量" sortable width="150" />
                            <el-table-column prop="voiceSatisfactionIndex" label="排名" width="60" />
                            <el-table-column prop="flowSatisfaction" label="上网质量" sortable width="150" />
                            <el-table-column prop="flowSatisfactionIndex" label="排名" width="60" />
                        </el-table-column>
                        <el-table-column label="领先度" align="center">
                            <el-table-column prop="overallSatisfactionLead" label="综合满意度" sortable width="150" />
                            <el-table-column prop="overallSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="bizSatisfactionLead" label="移动业务满意度" sortable width="150" />
                            <el-table-column prop="bizSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="networkSatisfactionLead" label="网络质量" sortable width="150" />
                            <el-table-column prop="networkSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="voiceSatisfactionLead" label="语音质量" sortable width="150" />
                            <el-table-column prop="voiceSatisfactionLeadIndex" label="排名" width="60" />
                            <el-table-column prop="flowSatisfactionLead" label="上网质量" sortable width="150" />
                            <el-table-column prop="flowSatisfactionLeadIndex" label="排名" width="60" />
                        </el-table-column>
                        <el-table-column prop="base" label="Base" />
                    </el-table>

                </el-card>
            </el-tab-pane>
            <el-tab-pane label="满意度趋势">
                <el-card shadow="always">
                    <el-form :inline="true" :model="queryForm1" class="demo-form-inline">
                        <el-form-item label="期数">
                            <el-select v-model="queryForm1.time" placeholder="请选择期数，支持多选" value-key="id" multiple
                                collapse-tags collapse-tags-tooltip :max-collapse-tags="3" style="width: 340px">
                                <el-option v-for="item in batchOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="考评项">
                            <el-select v-model="queryForm1.item" placeholder="请选择考评项，支持多选" multiple collapse-tags
                                collapse-tags-tooltip :max-collapse-tags="3" style="width: 340px">
                                <el-option v-for="item in itemOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="loadTendTable">查询</el-button>
                            <el-button @click="unsetQueryForm"><el-icon>
                                    <RefreshRight />
                                </el-icon>重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-row gutter="20" style="margin-top: 10px;">
                    <el-col :span="24">
                        <el-card shadow="always" class="detail-card">
                            <template #header>
                                <div class="card-header">
                                    <span>区县满意度表现值趋势图</span>
                                    <el-select class="header-select" v-model="countyTendItem" placeholder="Select"
                                        size="small" @change="changeCountyTrendType">
                                        <el-option v-for="item in itemOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                            </template>
                            <el-row>
                                <el-col :span="12">
                                    <div id='countyTendperformChart' style="width: 100%;height:400px;">
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div id='countyTendLeadChart' style="width: 100%;height:400px;">
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row gutter="20" style="margin-top: 10px;">
                    <el-col :span="24">
                        <el-card shadow="always" class="detail-card">
                            <template #header>
                                <div class="card-header">
                                    <span>地市满意度表现值趋势图</span>
                                    <el-select class="header-select" v-model="cityTendItem" placeholder="Select"
                                        size="small" @change="changeCityTrendType">
                                        <el-option v-for="item in itemOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                            </template>
                            <el-row>
                                <el-col :span="12">
                                    <div id='cityTendperformChart' style="width: 100%;height:400px;">
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div id='cityTendLeadChart' style="width: 100%;height:400px;">
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="always" style="margin-top: 10px;" header="区县满意度趋势">
                    <el-table :data="countyTendTableData" style="width: 100%" :span-method="objectSpanMethod" stripe>
                        <el-table-column prop="item" label="考评项" width="150" :formatter="itemFormatter" />
                        <el-table-column prop="name" label="区县" width="150" />
                        <el-table-column label="表现值" align="center">
                            <el-table-column v-for="(items, index) in currentDateStringList" :key="index + items"
                                :label="items" align="center">
                                <template v-slot="scope">
                                    {{ scope.row.performanceList[index].item }} ({{
                        scope.row.performanceList[index].index }})
                                </template>
                            </el-table-column>
                        </el-table-column>

                        <el-table-column label="领先度" align="center">
                            <el-table-column v-for="(items, index) in currentDateStringList" :key="index + items"
                                :label="items" align="center">
                                <template v-slot="scope">
                                    {{ scope.row.leadList[index].item }}({{
                        scope.row.leadList[index].index }})
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-card shadow="always" style="margin-top: 10px;" header="地市满意度趋势">
                    <el-table :data="cityTendTableData" style="width: 100%" :span-method="objectSpanMethod1" stripe>
                        <el-table-column prop="item" label="考评项" width="150" :formatter="itemFormatter" />
                        <el-table-column prop="name" label="地市" width="150" />
                        <el-table-column label="表现值" align="center">
                            <el-table-column v-for="(items, index) in currentDateStringList" :key="index + items"
                                :label="items" align="center">
                                <template v-slot="scope">
                                    {{ scope.row.performanceList[index].item }}({{
                        scope.row.performanceList[index].index == "null" ? '--' :
                            scope.row.performanceList[index].index }})
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="领先度" align="center">
                            <el-table-column v-for="(items, index) in currentDateStringList" :key="index + items"
                                :label="items" align="center">
                                <template v-slot="scope">
                                    {{ scope.row.leadList[index].item }}({{
                        scope.row.leadList[index].index == "null" ? '--' : scope.row.leadList[index].index
                                    }})
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import * as echarts from 'echarts';

import { querySatisfactionDateList, querySatisfactionList, querySatisfactionListTend, querySatisfactionListTendChart } from '@/api/complain/complain';

const queryForm = ref({
});
const batchOptions = ref([])
const countyTableData = ref([])
const currentDateString = ref("")
const cityTableData = ref([])
const countyTendTableData = ref([])
const currentDateStringList = ref([])
const cityTendTableData = ref([])


const queryForm1 = ref({
});

const itemOptions = [
    {
        label: '综合满意度',
        value: 'overallSatisfaction'
    },
    {
        label: '移动业务满意度',
        value: 'bizSatisfaction'
    },
    {
        label: '网络质量',
        value: 'networkSatisfaction'
    },
    {
        label: '语音质量',
        value: 'voiceSatisfaction'
    },
    {
        label: '上网质量',
        value: 'flowSatisfaction'
    },
]

const countyTendItem = ref("overallSatisfaction")
const cityTendItem = ref("overallSatisfaction")

function loadSatisfactionDateList() {

    querySatisfactionDateList().then(res => {
        console.log(res)
        let options = []
        for (var i = 0; i < res.data.length; i++) {
            let startTime = dateFormatter(res.data[i].startTime)
            let endTime = dateFormatter(res.data[i].endTime)
            let data = {
                id: i,
                startTime: startTime,
                endTime: endTime
            }
            const dateParts = getDateParts(startTime);
            var batch = Math.ceil(dateParts.month / 3);
            var tempStr = dateParts.year + "年第" + batch + "期" + formatDate(startTime) + "-" + formatDate(endTime)
            options.push({
                value: data,
                label: tempStr
            })
        }
        batchOptions.value = options
        queryForm.value.time = options[0].value
        currentDateString.value = options[0].label
        loadCountyTableData()
        loadCityTableData()
    })
}

function loadCountyTableData() {

    let params = {
        startTime: dateFormatter(queryForm.value.time.startTime),
        endTime: dateFormatter(queryForm.value.time.endTime),
        type: 2
    }
    querySatisfactionList(params).then(res => {
        countyTableData.value = res.data
        loadCountyPerformChart()
        loadCountyLeadChart()
    })

}

function loadCountyPerformChart() {
    let countyList = [], overallSatisfactionList = [], bizSatisfactionList = [], networkSatisfactionList = [], voiceSatisfactionList = [], flowSatisfactionList = []
    for (var i = 0; i < countyTableData.value.length; i++) {
        countyList.push(countyTableData.value[i].name)
        overallSatisfactionList.push(countyTableData.value[i].overallSatisfaction)
        bizSatisfactionList.push(countyTableData.value[i].bizSatisfaction)
        networkSatisfactionList.push(countyTableData.value[i].networkSatisfaction)
        voiceSatisfactionList.push(countyTableData.value[i].voiceSatisfaction)
        flowSatisfactionList.push(countyTableData.value[i].flowSatisfaction)

    }
    var myChart = echarts.init(document.getElementById("countyPerformBar"))
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['综合满意度', '移动业务满意度', '网络质量', '语音质量', '上网质量'],
            selected: {
                '网络质量': true,
                '语音质量': true,
                '上网质量': true,
                '综合满意度': false,
                '移动业务满意度': false
            }
        },
        xAxis: [
            {
                type: 'category',
                data: countyList,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '表现值',
                position: 'left',
                max: 100,
                min: 70,
                axisLabel: {
                    formatter: '{value}'
                }
            },
        ],
        series: [
            {
                name: '综合满意度',
                type: 'bar',
                data: overallSatisfactionList
            },
            {
                name: '移动业务满意度',
                type: 'bar',
                data: bizSatisfactionList
            },
            {
                name: '网络质量',
                type: 'bar',
                data: networkSatisfactionList
            },
            {
                name: '语音质量',
                type: 'bar',
                data: voiceSatisfactionList
            },
            {
                name: '上网质量',
                type: 'bar',
                data: flowSatisfactionList
            }
        ]
    };
    option && myChart.setOption(option);

}

function loadCountyLeadChart() {
    let countyList = [], overallSatisfactionList = [], bizSatisfactionList = [], networkSatisfactionList = [], voiceSatisfactionList = [], flowSatisfactionList = []
    for (var i = 0; i < countyTableData.value.length; i++) {
        countyList.push(countyTableData.value[i].name)
        overallSatisfactionList.push(countyTableData.value[i].overallSatisfactionLead)
        bizSatisfactionList.push(countyTableData.value[i].bizSatisfactionLead)
        networkSatisfactionList.push(countyTableData.value[i].networkSatisfactionLead)
        voiceSatisfactionList.push(countyTableData.value[i].voiceSatisfactionLead)
        flowSatisfactionList.push(countyTableData.value[i].flowSatisfactionLead)

    }
    var myChart = echarts.init(document.getElementById("countyLeadBar"))
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['综合满意度', '移动业务满意度', '网络质量', '语音质量', '上网质量'],
            selected: {
                '网络质量': true,
                '语音质量': true,
                '上网质量': true,
                '综合满意度': false,
                '移动业务满意度': false
            }
        },
        xAxis: [
            {
                type: 'category',
                data: countyList,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '领先度',
                position: 'left',
                axisLabel: {
                    formatter: '{value}'
                }
            },
        ],
        series: [
            {
                name: '综合满意度',
                type: 'bar',
                data: overallSatisfactionList
            },
            {
                name: '移动业务满意度',
                type: 'bar',
                data: bizSatisfactionList
            },
            {
                name: '网络质量',
                type: 'bar',
                data: networkSatisfactionList
            },
            {
                name: '语音质量',
                type: 'bar',
                data: voiceSatisfactionList
            },
            {
                name: '上网质量',
                type: 'bar',
                data: flowSatisfactionList
            }
        ]
    };
    option && myChart.setOption(option);

}

function loadCityTableData() {
    let params = {
        startTime: dateFormatter(queryForm.value.time.startTime),
        endTime: dateFormatter(queryForm.value.time.endTime),
        type: 1
    }
    querySatisfactionList(params).then(res => {
        cityTableData.value = res.data
        loadCityPerformChart()
        loadCityLeadChart()
    })
}

function loadCityPerformChart() {
    let cityList = [], overallSatisfactionList = [], bizSatisfactionList = [], networkSatisfactionList = [], voiceSatisfactionList = [], flowSatisfactionList = []
    for (var i = 0; i < cityTableData.value.length; i++) {
        if (cityTableData.value[i].name == "全省") {
            continue
        }
        cityList.push(cityTableData.value[i].name)
        overallSatisfactionList.push(cityTableData.value[i].overallSatisfaction)
        bizSatisfactionList.push(cityTableData.value[i].bizSatisfaction)
        networkSatisfactionList.push(cityTableData.value[i].networkSatisfaction)
        voiceSatisfactionList.push(cityTableData.value[i].voiceSatisfaction)
        flowSatisfactionList.push(cityTableData.value[i].flowSatisfaction)

    }
    var myChart = echarts.init(document.getElementById("cityPerformBar"))
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['综合满意度', '移动业务满意度', '网络质量', '语音质量', '上网质量'],
            selected: {
                '网络质量': true,
                '语音质量': true,
                '上网质量': true,
                '综合满意度': false,
                '移动业务满意度': false
            }
        },
        xAxis: [
            {
                type: 'category',
                data: cityList,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '表现值',
                position: 'left',
                max: 100,
                min: 70,
                axisLabel: {
                    formatter: '{value}'
                }
            },
        ],
        series: [
            {
                name: '综合满意度',
                type: 'bar',
                data: overallSatisfactionList
            },
            {
                name: '移动业务满意度',
                type: 'bar',
                data: bizSatisfactionList
            },
            {
                name: '网络质量',
                type: 'bar',
                data: networkSatisfactionList
            },
            {
                name: '语音质量',
                type: 'bar',
                data: voiceSatisfactionList
            },
            {
                name: '上网质量',
                type: 'bar',
                data: flowSatisfactionList
            }
        ]
    };
    option && myChart.setOption(option);

}

function loadCityLeadChart() {
    let cityList = [], overallSatisfactionList = [], bizSatisfactionList = [], networkSatisfactionList = [], voiceSatisfactionList = [], flowSatisfactionList = []
    for (var i = 0; i < cityTableData.value.length; i++) {
        if (cityTableData.value[i].name == "全省") {
            continue
        }
        cityList.push(cityTableData.value[i].name)
        overallSatisfactionList.push(cityTableData.value[i].overallSatisfactionLead)
        bizSatisfactionList.push(cityTableData.value[i].bizSatisfactionLead)
        networkSatisfactionList.push(cityTableData.value[i].networkSatisfactionLead)
        voiceSatisfactionList.push(cityTableData.value[i].voiceSatisfactionLead)
        flowSatisfactionList.push(cityTableData.value[i].flowSatisfactionLead)

    }
    var myChart = echarts.init(document.getElementById("cityLeadBar"))
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['综合满意度', '移动业务满意度', '网络质量', '语音质量', '上网质量'],
            selected: {
                '网络质量': true,
                '语音质量': true,
                '上网质量': true,
                '综合满意度': false,
                '移动业务满意度': false
            }
        },
        xAxis: [
            {
                type: 'category',
                data: cityList,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '领先度',
                position: 'left',
                axisLabel: {
                    formatter: '{value}'
                }
            },
        ],
        series: [
            {
                name: '综合满意度',
                type: 'bar',
                data: overallSatisfactionList
            },
            {
                name: '移动业务满意度',
                type: 'bar',
                data: bizSatisfactionList
            },
            {
                name: '网络质量',
                type: 'bar',
                data: networkSatisfactionList
            },
            {
                name: '语音质量',
                type: 'bar',
                data: voiceSatisfactionList
            },
            {
                name: '上网质量',
                type: 'bar',
                data: flowSatisfactionList
            }
        ]
    };
    option && myChart.setOption(option);

}

function loadTableData() {
    let startTime = dateFormatter(queryForm.value.time.startTime)
    let endTime = dateFormatter(queryForm.value.time.endTime)
    const dateParts = getDateParts(startTime);
    var batch = Math.ceil(dateParts.month / 3);
    var tempStr = dateParts.year + "年第" + batch + "期" + formatDate(startTime) + "-" + formatDate(endTime)
    currentDateString.value = tempStr
    loadCountyTableData()
    loadCityTableData()
}

function loadCountyTendTableData() {
    let dateList = []
    let tempList = []

    if (queryForm1.value.time && queryForm1.value.time.length > 0) {
        for (var i = 0; i < queryForm1.value.time.length; i++) {
            let temp = dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].startTime) + "," + dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].endTime)
            dateList.push(temp)

        }
    }
    let params = {
        typeList: queryForm1.value.item,
        dateList: dateList,
        type: 2
    }
    querySatisfactionListTend(params).then(res => {

        countyTendTableData.value = res.data
    })

}

function loadCityTendTableData() {
    let dateList = []


    if (queryForm1.value.time && queryForm1.value.time.length > 0) {
        for (var i = 0; i < queryForm1.value.time.length; i++) {
            let temp = dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].startTime) + "," + dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].endTime)
            dateList.push(temp)
        }
    }
    let params = {
        typeList: queryForm1.value.item,
        dateList: dateList,
        type: 1
    }
    querySatisfactionListTend(params).then(res => {
        cityTendTableData.value = res.data
    })

}

function loadTendTable() {
    let tempList = [], endTimeList = []
    if (queryForm1.value.time && queryForm1.value.time.length > 0) {
        for (var i = 0; i < queryForm1.value.time.length; i++) {
            let startTime = queryForm1.value.time[queryForm1.value.time.length - 1 - i].startTime
            let endTime = queryForm1.value.time[queryForm1.value.time.length - 1 - i].endTime
            const dateParts = getDateParts(startTime);
            var batch = Math.ceil(dateParts.month / 3);
            var tempStr = dateParts.year + "年第" + batch + "期" + formatDate(startTime) + "-" + formatDate(endTime)
            tempList.push(tempStr)
            endTimeList.push(endTime)
        }
    }
    currentDateStringList.value = tempList
    loadCountyTendTableData()
    loadCityTendTableData()
    loadCountyPerformTendChart(endTimeList)
    loadCityPerformTendChart(endTimeList)
}

function loadCountyPerformTendChart(endTimeList) {
    let dateList = []

    if (queryForm1.value.time && queryForm1.value.time.length > 0) {
        for (var i = 0; i < queryForm1.value.time.length; i++) {
            let temp = dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].startTime) + "," + dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].endTime)
            dateList.push(temp)

        }
    }
    let params = {
        item: countyTendItem.value,
        dateList: dateList,
        type: 2
    }

    querySatisfactionListTendChart(params).then(res => {
        doLoadCountyTendChart(endTimeList, res.data)
    })

}

function loadCityPerformTendChart(endTimeList) {
    let dateList = []

    if (queryForm1.value.time && queryForm1.value.time.length > 0) {
        for (var i = 0; i < queryForm1.value.time.length; i++) {
            let temp = dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].startTime) + "," + dateFormatter(queryForm1.value.time[queryForm1.value.time.length - 1 - i].endTime)
            dateList.push(temp)

        }
    }
    let params = {
        item: cityTendItem.value,
        dateList: dateList,
        type: 1
    }

    querySatisfactionListTendChart(params).then(res => {
        doLoadCityTendChart(endTimeList, res.data)
    })

}

function doLoadCountyTendChart(endTimeList, data) {
    let nameList = []
    let seriesData = [], seriesData1 = []
    for (let i = 0; i < data.length; i++) {
        let temp = data[i]
        let performList = [], leadList = []
        nameList.push(temp.name)
        for (let j = 0; j < temp.performanceList.length; j++) {
            performList.push(temp.performanceList[j].item)
        }
        for (let j = 0; j < temp.leadList.length; j++) {
            leadList.push(temp.leadList[j].item)
        }

        var item = {
            name: temp.name,
            type: 'line',
            data: performList
        }

        var item1 = {
            name: temp.name,
            type: 'line',
            data: leadList
        }
        seriesData.push(item)
        seriesData1.push(item1)
    }

    var myChart = echarts.init(document.getElementById("countyTendperformChart"))
    var option = {
        legend: {
            data: nameList,
            bottom: 0
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: endTimeList
        },
        yAxis: {
            type: 'value',
            name: '表现值',
            max: 100,
            min: 70,
        },
        series: seriesData
    };
    option && myChart.setOption(option);

    var myChart1 = echarts.init(document.getElementById("countyTendLeadChart"))
    var option1 = {
        legend: {
            data: nameList,
            bottom: 0
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: endTimeList
        },
        yAxis: {
            type: 'value',
            name: '领先度'
        },
        series: seriesData1
    };
    option1 && myChart1.setOption(option1);
}

function doLoadCityTendChart(endTimeList, data) {
    let nameList = []
    let seriesData = [], seriesData1 = []
    for (let i = 0; i < data.length; i++) {
        let temp = data[i]
        let performList = [], leadList = []
        nameList.push(temp.name)
        for (let j = 0; j < temp.performanceList.length; j++) {
            performList.push(temp.performanceList[j].item)
        }
        for (let j = 0; j < temp.leadList.length; j++) {
            leadList.push(temp.leadList[j].item)
        }

        var item = {
            name: temp.name,
            type: 'line',
            data: performList
        }

        var item1 = {
            name: temp.name,
            type: 'line',
            data: leadList
        }
        seriesData.push(item)
        seriesData1.push(item1)
    }

    var myChart = echarts.init(document.getElementById("cityTendperformChart"))
    var option = {
        legend: {
            data: nameList,
            bottom: 0
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: endTimeList
        },
        yAxis: {
            type: 'value',
            name: '表现值',
            max: 100,
            min: 70,
        },
        series: seriesData
    };
    option && myChart.setOption(option);

    var myChart1 = echarts.init(document.getElementById("cityTendLeadChart"))
    var option1 = {
        legend: {
            data: nameList,
            bottom: 0
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: endTimeList
        },
        yAxis: {
            type: 'value',
            name: '领先度'
        },
        series: seriesData1
    };
    option1 && myChart1.setOption(option1);

}


function getDateParts(dateStr) {
    // 使用"-"作为分隔符分割字符串  
    const parts = dateStr.split('-');

    // 检查分割后的数组是否包含三个元素（年、月、日）  
    if (parts.length !== 3) {
        throw new Error('Invalid date format');
    }

    // 提取年、月、日  
    const year = parseInt(parts[0], 10); // 将年转换为整数  
    const month = parseInt(parts[1], 10); // 将月转换为整数  
    const day = parseInt(parts[2], 10); // 将日转换为整数  

    // 返回包含年、月、日的对象（或者你可以根据需要返回其他格式）  
    return {
        year,
        month,
        day
    };
}


function dateFormatter(cellValue) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day;
    return formattedDateTimeString;
}

function formatDate(dateStr) {
    // 使用"-"作为分隔符分割字符串  
    const [year, month, day] = dateStr.split('-');
    return `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}`;
}

function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
        const currentValue = row[column.property];
        const preRow = countyTendTableData.value[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 };
        } else {
            let rowspan = 1;
            for (let i = rowIndex + 1; i < countyTendTableData.value.length; i++) {
                const nextRow = countyTendTableData.value[i];
                const nextValue = nextRow[column.property];
                if (nextValue === currentValue) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return { rowspan, colspan: 1 };
        }
    }
}

function objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
        const currentValue = row[column.property];
        const preRow = cityTendTableData.value[rowIndex - 1];
        const preValue = preRow ? preRow[column.property] : null;
        if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 };
        } else {
            let rowspan = 1;
            for (let i = rowIndex + 1; i < cityTendTableData.value.length; i++) {
                const nextRow = cityTendTableData.value[i];
                const nextValue = nextRow[column.property];
                if (nextValue === currentValue) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return { rowspan, colspan: 1 };
        }
    }
}

function itemFormatter(row, column, cellValue, index) {
    if (!cellValue) {
        return;
    }

    if (cellValue == "overallSatisfaction") {
        return "综合满意度"
    } else if (cellValue == "bizSatisfaction") {
        return "移动业务满意度"
    } else if (cellValue == "networkSatisfaction") {
        return "网络质量"
    } else if (cellValue == "voiceSatisfaction") {
        return "语音质量"
    } else if (cellValue == "flowSatisfaction") {
        return "上网质量"
    }
}

function unsetQueryForm() {
    queryForm.value = {}
    queryForm1.value = {}
}

function changeCountyTrendType() {
    loadCountyPerformTendChart()
}

function changeCityTrendType() {
    loadCityPerformTendChart()
}

onMounted(() => {
    loadSatisfactionDateList()
})



</script>

<style scoped>
.card-header {
    position: relative;
    /* 设置为相对定位 */
    padding-right: 100px;
    /* 根据 select 的宽度调整，确保有足够空间 */
}

.card-header .header-select {
    position: absolute;
    right: 0;
    /* 紧靠容器右侧 */
    top: 50%;
    /* 垂直居中的一种方法 */
    transform: translateY(-50%);
    /* 向上移动自身高度的一半来垂直居中 */
}
</style>